import React, { useState, useEffect } from 'react';
import { Table, Button, message } from 'antd';
import axios from 'axios';
import '../assets/css/louyu.css'
import images2 from '../assets/images/bianji.png';
import images3 from '../assets/images/shanchu.png';
import Xinjianlouyu from '../components/Xinjianlouyu'; // 引入新建楼宇组件

export default function LouYu() {
  const [dataSource, setDataSource] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false); // 控制新建楼宇模态框的显示状态

  const getData = (p) => {
    axios.get('http://172.16.17.120:8080/getList', {
      params: {
        act: 'index',
        op: 'getHomeMoreProduct',
        curpage: p,
        xxclient: 'new'
      }
    }).then(res => {
      console.log(res.data);
      setDataSource([...res.data]);
    });
  };

  useEffect(() => {
    getData(1);
  }, []);

  const columns = [
    {
      title: <div className="mcustom-title">名称</div>,
      key: 'name',
      render: (text, row) => (
        <div className="name-container">
          <img width={45} height={80} src={row.url} className='mmingtu' 
          alt={`Image for ${row.name}`} style={{ maxWidth: "100%", maxHeight: "100%" }} />
          <span>{row.name}</span>
        </div>
      ),
    },
    {
      title: <div className="mcustom-title">详细地址</div>,
      key: 'dizhi',
      render: (text, row) => (
        <div className="mdizhi">
          {row.dizhi}
        </div>
      ),
    },
    {
      title: <div className="mcustom-title">操作</div>,
      key: 'action',
      render: (text, row) => (
        <div className='mcaozuobiao'>
          <img className='mbianji' src={images2} alt="编辑" onClick={() => handleEdit(row)} style={{ cursor: 'pointer', marginRight: '10px' }} />
          <img className='mshanchu' src={images3} alt="删除" onClick={() => handleDelete(row)} style={{ cursor: 'pointer' }} />
        </div>
      ),
    },
  ];

  const handleEdit = (row) => {
    console.log('编辑:', row);
    // 编辑逻辑
  };

  const handleDelete = (row) => {
    const updatedDataSource = dataSource.filter(item => item.id !== row.id);
    setDataSource(updatedDataSource);
    message.success('删除成功');
  };

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    // 新建楼宇成功后的回调，这里可以添加更多逻辑
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <div className='mquan'>
      <Button type="primary" onClick={showModal} className='mxinjian'>新建楼宇</Button>
      <div className='mchalouyu'>
        <input type="text" placeholder='    请输入楼宇名称' />
        <Button className='mchaxun'>查询</Button>
        <Button className='mchongzhi'>重置</Button>
      </div>
      <div className='mlouyu'>
        <div className='mkong'></div>
        <Table
          dataSource={dataSource}
          columns={columns}
          scroll={{ scrollToFirstRowOnChange: true, y: 500 }}
          rowKey="id"
        />
      </div>
      <Xinjianlouyu
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      />
    </div>
  );
}